<template>
    <el-card class="form-container" shadow="never">
        <el-page-header @back="goBack"></el-page-header>
        <br>
        <el-form :model="productCate"
                 :rules="rules"
                 ref="productCateFrom"
                 label-width="150px">
            <el-form-item label="分类名称：" prop="name">
                <el-input v-model="productCate.name"></el-input>
            </el-form-item>
            <el-form-item label="上级分类：">
                <el-select v-model="productCate.parentId"
                           placeholder="请选择分类">
                    <el-option
                            v-for="item in selectProductCateList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数量单位：">
                <el-input v-model="productCate.productUnit"></el-input>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="productCate.sort"></el-input>
            </el-form-item>
            <el-form-item label="是否显示：">
                <el-radio-group v-model="productCate.showStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否显示在导航栏：">
                <el-radio-group v-model="productCate.navStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分类图标：">
                <single-upload v-model="productCate.icon"></single-upload>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button>
            </el-form-item>
            <el-form-item label="关键词：">
                <el-input v-model="productCate.keywords"></el-input>
            </el-form-item>
            <el-form-item label="分类描述：">
                <el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
                <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    import {fetchList, createProductCate, updateProductCate, getProductCate} from '../../../../api/productCate';
    import SingleUpload from '../../../../components/Upload/singleUpload';

    const defaultProductCate = {
        description: '',
        icon: '',
        keywords: '',
        name: '',
        navStatus: 0,
        parentId: 0,
        productUnit: '',
        showStatus: 0,
        sort: 0,
        productAttributeIdList: []
    };
    export default {
        name: "ProductCateDetail",
        components: {SingleUpload},
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                productCate: Object.assign({}, defaultProductCate),
                selectProductCateList: [],
                rules: {
                    name: [
                        {required: true, message: '请输入品牌名称', trigger: 'blur'},
                        {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                    ]
                },
                filterAttrs: [],
                filterProductAttrList: [{
                    value: []
                }]
            }
        },
        created() {
            if (this.isEdit) {
                getProductCate(this.$route.query.id).then(response => {
                    this.productCate = response;
                });
            } else {
                this.productCate = Object.assign({}, defaultProductCate);
            }
            this.getSelectProductCateList();
        },
        methods: {
            goBack() {
                this.$router.go(-1);
            },
            getSelectProductCateList() {
                fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
                    this.selectProductCateList = response.data;
                    this.selectProductCateList.unshift({id: 0, name: '无上级分类'});
                });
            },

            getProductAttributeIdList() {
                //获取选中的筛选商品属性
                let productAttributeIdList = [];
                for (let i = 0; i < this.filterProductAttrList.length; i++) {
                    let item = this.filterProductAttrList[i];
                    if (item.value !== null && item.value.length === 2) {
                        productAttributeIdList.push(item.value[1]);
                    }
                }
                return productAttributeIdList;
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否提交数据', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            if (this.isEdit) {
                                this.productCate.productAttributeIdList = this.getProductAttributeIdList();
                                updateProductCate(this.$route.query.id, this.productCate).then(response => {
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success',
                                        duration: 1000
                                    });
                                    this.$router.back();
                                });
                            } else {
                                this.productCate.productAttributeIdList = this.getProductAttributeIdList();
                                createProductCate(this.productCate).then(response => {
                                    this.$refs[formName].resetFields();
                                    this.resetForm(formName);
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success',
                                        duration: 1000
                                    });
                                    this.$router.push({path: '/pms/productCate'});
                                });
                            }
                        });

                    } else {
                        this.$message({
                            message: '验证失败',
                            type: 'error',
                            duration: 1000
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.productCate = Object.assign({}, defaultProductCate);
                this.getSelectProductCateList();
                this.filterProductAttrList = [{
                    value: []
                }];
            },
            removeFilterAttr(productAttributeId) {
                if (this.filterProductAttrList.length === 1) {
                    this.$message({
                        message: '至少要留一个',
                        type: 'warning',
                        duration: 1000
                    });
                    return;
                }
                var index = this.filterProductAttrList.indexOf(productAttributeId);
                if (index !== -1) {
                    this.filterProductAttrList.splice(index, 1)
                }
            },
            handleAddFilterAttr() {
                if (this.filterProductAttrList.length === 3) {
                    this.$message({
                        message: '最多添加三个',
                        type: 'warning',
                        duration: 1000
                    });
                    return;
                }
                this.filterProductAttrList.push({
                    value: null,
                    key: Date.now()
                });
            }
        },
        filters: {
            filterLabelFilter(index) {
                if (index === 0) {
                    return '筛选属性：';
                } else {
                    return '';
                }
            }
        }
    }
</script>

<style scoped>

</style>
